fix: resolve several drag & drop issues #1845

nperez0111 · 2025-07-11T16:35:57Z

This adjusts the logic for drag & drop (especially between editor instances) to handle things better. It is surprisingly complicated to get drag & drop to work nicely across editor instances.

The problem is that each editor instance is listening for events on it's own HTMLElement, but we want to support dragging near an element, and allowing the drop to occur anyway (despite not actually dropping on the element, just near it). To do this, we have to fiddle with the event handling (since we still want for each editor instance to only listen for drag & drop events on it's own element) such that we create synthetic events to trick the editor into doing what the user intended, but did not actually do.

We need to fire these synthetic events under very specific circumstances:

When the drag-over or drop event is close to an editor element (within a range, right now 250px), but not within an editor

But, now that we are sometimes triggering these synthetic events, Prosemirror does not have the full-scope of what we've implemented so when dragging & dropping across different editor instances we need to either:

When the editor is the drop point, but not the drag point, we need to collapse the selection
- When the content is dragged outside of editor, but should be dropped into the editor, we need to fire a synthetic event
When the editor is the drag point, but not the drop point, we need to delete the selection

This leads to some very complex logic & several edge cases. For example, there are differences between dragging text vs. using the side menu handle.

~~I also want to fix the drag previews in this PR~~ (This seems to not be possible in firefox)

TODO

I want to revisit the purpose of the sideMenuDetection, now that it is not used for the drag & drop of content

vercel · 2025-07-11T16:36:02Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jul 14, 2025 1:59pm
blocknote-website	❌ Failed (Inspect)		Jul 14, 2025 1:59pm

pkg-pr-new · 2025-07-11T16:53:14Z

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1845

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1845

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1845

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1845

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1845

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1845

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1845

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1845

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1845

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@1845

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1845

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1845

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1845

commit: cc8d466

Copilot

Pull Request Overview

A unified, document-level drag & drop implementation to handle cross-editor operations by synthesizing events based on proximity, replacing per-instance handlers and resolving cursor/display issues.

Replaced legacy onDrop/onDragEnd in SideMenuPlugin with onDragOver, onDrop, and onDragEnd that use getDragEventContext
Added findClosestEditorElement, dispatchSyntheticEvent, and closeDropCursor for synthetic event management within 250px thresholds
Bumped prosemirror-dropcursor from 1.8.1 to 1.8.2

Reviewed Changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.

File	Description
packages/core/src/extensions/SideMenu/SideMenuPlugin.ts	Reworked drag & drop logic: removed old handlers, added proximity detection, context extraction, and synthetic event dispatchers
packages/core/package.json	Updated `prosemirror-dropcursor` dependency to `^1.8.2`

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts:432

The new getDragEventContext logic contains multiple edge cases (origin vs. drop point vs. bounds). Consider adding unit tests to cover each scenario for regression safety.

  getDragEventContext = (event: DragEvent) => {

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts:517

The selection collapse now uses selection.anchor, which differs from the original selection.to behavior and may shift the drop insertion point. Consider restoring this.pmView.state.tr.selection.to to match prior logic.

          TextSelection.create(

Copilot · 2025-07-14T14:46:36Z

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

+    const evt = new Event(event.type as "dragover", event) as any;
+    const editorBoundingBox = this.pmView.dom.getBoundingClientRect();
    evt.clientX = event.clientX;
    evt.clientY = event.clientY;


Creating synthetic drag/drop events with new Event omits the native DragEvent properties. Use new DragEvent(event.type, { ...eventInit }) to ensure dataTransfer, coordinates, and default behavior are preserved.

Suggested change

const evt = new Event(event.type as "dragover", event) as any;

const editorBoundingBox = this.pmView.dom.getBoundingClientRect();

evt.clientX = event.clientX;

evt.clientY = event.clientY;

const editorBoundingBox = this.pmView.dom.getBoundingClientRect();

const evt = new DragEvent(event.type, {

clientX: event.clientX,

clientY: event.clientY,

dataTransfer: event.dataTransfer,

});

I tried to refactor this, but there is something finicky with drag events that they drop the data transfer

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

Copilot · 2025-07-14T14:46:36Z

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

+    const closestEditor = this.findClosestEditorElement(event);
+
+    // We arbitrarily decide how far is "too far" from the closest editor to be considered a drop point
+    if (!closestEditor || closestEditor.distance > 250) {


[nitpick] The 250px threshold is a magic number. Extract it into a named constant (e.g., MAX_PROXIMITY_PX) to clarify its purpose and simplify future adjustments.

Suggested change

if (!closestEditor || closestEditor.distance > 250) {

if (!closestEditor || closestEditor.distance > MAX_PROXIMITY_PX) {

@matthewlipski not sure what the best thing to do here would be. Likely a percentage like you are using elsewhere in the file?

YousefED

Great!! The comments make things so much clearer :)

Some UX glitches I encountered when dragging in a single editor:

see gif, in order of appearance (I think all of these don't occur on the live version):

dragging to side+below an editor moves drag line to top (instead of at bottom)
dropping a block opens the formatting toolbar
dropping a block to the side doesn't seem to work

YousefED · 2025-07-14T18:32:03Z

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

+   *  - If the dragover event is outside the bounds of the current editor, then it will dispatch a synthetic dragleave event to the current editor
+   *    (which will trigger the drop-cursor to be removed from the current editor)
+   *
+   * The synthetic event is a necessary evil because we do not control prosemirror-dropcursor to be able to show the drop-cursor within the range we want


would it be a lot easier if we fork dropcursor?

normally I'd not suggest this, but given we already have an alternative dropcursor plugin for mult-column, it might be a cleaner solution?

YousefED · 2025-07-14T18:32:22Z

packages/core/package.json

@@ -93,7 +93,7 @@
    "@tiptap/pm": "^2.12.0",
    "emoji-mart": "^5.6.0",
    "hast-util-from-dom": "^5.0.1",
-    "prosemirror-dropcursor": "^1.8.1",
+    "prosemirror-dropcursor": "^1.8.2",


we'll probably need to update our multi-column dropcursor as well (see comment below)

YousefED · 2025-07-14T18:33:56Z

packages/core/src/extensions/SideMenu/SideMenuPlugin.ts

-    }
-
-    if (
-      this.sideMenuDetection === "editor" ||


did we drop sideMenuDetection? then we also need to remove it from editor options / docs / etc

nperez0111 added 5 commits July 11, 2025 15:21

refactor: just re-order

5c7b881

fix: handle drag & drop between editors more robustly

5dd4425

chore: remove unneeded error

6645267

Merge branch 'main' into dragging

4967939

docs: add more docs

ca4f365

vercel bot had a problem deploying to Preview – blocknote-website July 11, 2025 16:36 Failure

vercel bot deployed to Preview – blocknote July 11, 2025 16:36 View deployment

nperez0111 added 2 commits July 14, 2025 13:42

fix: better distance calc

6ac34ea

fix: make implementation much more stable

8b5fc6a

vercel bot had a problem deploying to Preview – blocknote-website July 14, 2025 13:46 Failure

vercel bot deployed to Preview – blocknote July 14, 2025 13:49 View deployment

refactor: put back

cc8d466

vercel bot had a problem deploying to Preview – blocknote-website July 14, 2025 13:50 Failure

vercel bot deployed to Preview – blocknote July 14, 2025 13:53 View deployment

nperez0111 requested a review from Copilot July 14, 2025 14:44

Copilot AI reviewed Jul 14, 2025

View reviewed changes

nperez0111 requested review from YousefED and matthewlipski July 14, 2025 14:56

YousefED requested changes Jul 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: resolve several drag & drop issues #1845

fix: resolve several drag & drop issues #1845

nperez0111 commented Jul 11, 2025 •

edited

Loading

Uh oh!

vercel bot commented Jul 11, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Jul 11, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 14, 2025

Uh oh!

nperez0111 Jul 14, 2025

Uh oh!

Uh oh!

Copilot AI Jul 14, 2025

Uh oh!

nperez0111 Jul 14, 2025

Uh oh!

YousefED left a comment •

edited

Loading

Uh oh!

YousefED Jul 14, 2025

Uh oh!

YousefED Jul 14, 2025

Uh oh!

YousefED Jul 14, 2025

Uh oh!

Uh oh!

	if (!closestEditor \|\| closestEditor.distance > 250) {
	if (!closestEditor \|\| closestEditor.distance > MAX_PROXIMITY_PX) {

Uh oh!

fix: resolve several drag & drop issues #1845

Are you sure you want to change the base?

fix: resolve several drag & drop issues #1845

Conversation

nperez0111 commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Uh oh!

vercel bot commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

nperez0111 Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

nperez0111 Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

YousefED left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

YousefED Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

YousefED Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

YousefED Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nperez0111 commented Jul 11, 2025 •

edited

Loading

vercel bot commented Jul 11, 2025 •

edited

Loading

pkg-pr-new bot commented Jul 11, 2025 •

edited

Loading

YousefED left a comment •

edited

Loading